import React from 'react';
import { Button, Icon, Tooltip } from 'antd';
import { WeaLocaleProvider, WeaDialog } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

class Confirm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false, templateType: '', data: {} };
  }

  render() {
    const { visible, templateType, data } = this.state;
    const { detailinfo = {} } = data;
    const { successList = [], failList = [] } = detailinfo;

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4c2s0k`}
        visible={visible}
        title={getLabel(386786, '信息确认')}
        icon="icon-coms-currency"
        iconBgcolor="#217346"
        style={{ width: 600, height: 400 }}
        zIndex={100}
        hasScroll={true}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
      >
        <div className="wea-non-standard-confirm">
          {successList && successList.length ? (
            <div className="wea-non-standard-confirm-success">
              <div className="wea-non-standard-confirm-title">
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@fg4a0t`} type="check-circle" style={{ color: '#1a9437', fontSize: '14px' }} />
                <span style={{ marginLeft: '10px' }}>
                  {templateType == '0' ? getLabel(519282, '以下非标功能停用成功') : getLabel(519283, '以下非标功能启用成功')}
                </span>
              </div>
              <div className="wea-non-standard-confirm-list">
                <ul>
                  {successList.map((item, index) => (
                      <li key={index}>
                        <span className="wea-non-standard-confirm-id">{item.id}</span>
                        <span className="wea-non-standard-confirm-name">{item.name}</span>
                      </li>
                    ))}
                </ul>
              </div>
            </div>
          ) : null}
          {failList && failList.length ? (
            <div className="wea-non-standard-confirm-failure">
              <div className="wea-non-standard-confirm-title">
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@13ngmx`} type="exclamation-circle" style={{ color: '#db525a', fontSize: '14px' }} />
                <span style={{ marginLeft: '10px' }}>
                  {templateType == '0' ? getLabel(519284, '以下非标功能停用失败') : getLabel(519285, '以下非标功能启用失败')}
                </span>
              </div>
              <div className="wea-non-standard-confirm-list">
                <ul>
                  {failList.map((item, index) => (
                      <li key={index}>
                        <span className="wea-non-standard-confirm-id">{item.id}</span>
                        <span className="wea-non-standard-confirm-name">{item.name}</span>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@omup3p@${item.id}`} overlayClassName="wea-non-standard-confirm-tooltip" placement="bottom" title={item.msg}>
                          <span className="wea-non-standard-confirm-msg">{getLabel(519277, '请把鼠标移到此处查看失败原因')}</span>
                        </Tooltip>
                      </li>
                    ))}
                </ul>
              </div>
            </div>
          ) : null}
        </div>
      </WeaDialog>
    );
  }

  getButtons = () => {
    const buttons = [];
    buttons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zfjo5p`} type="primary" onClick={this.onCancel}>
        {getLabel(83446, '确定')}
      </Button>,
    );
    return buttons;
  };

  onShow = (templateType, data) => {
    this.setState({ visible: true, templateType, data });
  };

  onCancel = () => {
    this.setState({ visible: false });
  };
}

export default Confirm;
